<template>
  <div class="hello">
    <div class="hello-top">
      <p class="title">购物车</p>
      <p>编辑</p>
    </div>
    <div class="main">
      <top-nav-vue></top-nav-vue>
      <top-vue></top-vue>
    </div>
    <div class="bottom">
      <p>为你推荐</p>
      <p style="padding-bottom:20px">买了以上产品的人还买了---<span style="color:orange">{{ name }}</span></p>
      <bottom-vue @sendData="getData"></bottom-vue>
    </div>
    <div>
      <nav-vue></nav-vue>
    </div>
    <div style="position:fixed; bottom:80px">
      <all-vue></all-vue>
    </div>
  </div>
</template>

<script>
import topNavVue from '../views/shoppingList/topList.vue'
import topVue from '../views/shoppingList/top.vue'
import bottomVue from '../views/shops/top.vue'
import navVue from './nav.vue'
import allVue from './all.vue'
export default {
  name: "HelloWorld",
  components:{
    topNavVue,
    topVue,
    bottomVue,
    navVue,
    allVue
  },
  data() {
    return {
      name: "",

    };
  },
  methods:{
    getData(val){
      this.name = val
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hello {
  width: 400px;
  margin: auto;
  background-color: rgba(245, 243, 243,0.7);
}
.hello-top {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  background-color: white;
  .title {
    width: 300px;
    text-align: center;
  }
}
.bottom {
  margin-top: 20px;
  position: relative;
  p {
    text-align: center;
    font-size: 10px;
    color: #999;
    border-bottom: 1px solid #999;
    &:first-child {
      font-size: 15px;
      color: orange;
      position: absolute;
      border: none;
      background-color: white;
      left: 50%;
      top:25px;
      transform: translateX(-50%);
    }
  }
}
</style>
